// start::splinearea-widget
export const splineAreaWidget = {
  series: [
    {
      name: 'series1',
      data: [31, 40, 28, 51, 42, 109, 100],
    },
    {
      name: 'series2',
      data: [11, 32, 45, 32, 34, 52, 41],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
      labels: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    yaxis: {
      show: false,
    },
    grid: {
      show: false,
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#6ed3cf', '#4caf50'],
    stroke: {
      curve: 'straight',
      width: 1,
    },
  },
};

export const splineAreaWidgetTwo = {
  series: [
    {
      name: 'series1',
      data: [90, 40, 28, 51, 42, 109, 100],
    },
    {
      name: 'series2',
      data: [11, 90, 45, 32, 34, 52, 41],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
      labels: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    yaxis: {
      show: false,
    },
    grid: {
      show: false,
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#6ed3cf', '#9068be'],
    stroke: {
      curve: 'smooth',
      width: 1,
    },
  },
};
export const splineAreaWidgetThree = {
  series: [
    {
      name: 'series1',
      data: [11, 40, 28, 51, 42, 109, 100],
    },
    {
      name: 'series2',
      data: [100, 40, 45, 32, 34, 0, 41],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#fae596', '#3fb0ac'],
    stroke: {
      curve: 'smooth',
      width: 1,
    },
  },
};
export const splineAreaWidgetFour = {
  series: [
    {
      name: 'series1',
      data: [11, 40, 28, 51, 42, 109, 100],
    },
    {
      name: 'series2',
      data: [100, 40, 45, 32, 34, 0, 41],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#f44336', '#e05038'],
    stroke: {
      curve: 'smooth',
      width: 1,
    },
  },
};
export const splineAreaWidgetFive = {
  series: [
    {
      name: 'series1',
      data: [31, 40, 28, 51, 42, 109, 100],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#8B5CF6', '#e97d23'],
    stroke: {
      curve: 'straight',
      width: 1,
    },
  },
};
export const splineAreaWidgetSix = {
  series: [
    {
      name: 'series1',
      data: [60, 20, 28, 51, 15, 40, 50],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
    },

    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#98dafc'],
    stroke: {
      curve: 'straight',
      width: 1,
    },
  },
};
export const splineAreaWidgetSeven = {
  series: [
    {
      name: 'series1',
      data: [30, 20, 90, 2, 15, 40, 50],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: '100px',
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
    },

    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#bcd5d1'],

    stroke: {
      curve: 'straight',
      width: 1,
    },
  },
};
export const splineAreaWidgetEight = {
  series: [
    {
      name: 'series1',
      data: [65, 90, 10, 45, 15, 75, 50],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },

    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
    },

    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#6534ff'],

    stroke: {
      curve: 'straight',
      width: 1,
    },
  },
};

// pie chart

export const widgetBarChart = {
  series: [
    {
      name: 'Inflation',
      data: [60, 20, 28, 51, 15, 40, 50, 60, 20, 28, 51, 15, 40, 50],
    },
  ],
  chartOptions: {
    chart: {
      height: 350,
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: '50%',
      },
    },
    dataLabels: {
      enabled: false,
    },

    xaxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
      ],
      position: 'top',
      labels: {
        offsetY: -18,
      },

      tooltip: {
        enabled: true,
        offsetY: -35,
      },
    },

    colors: ['#98dafc'],
  },
};
export const widgetBarChartTwo = {
  series: [
    {
      name: 'Inflation',
      data: [12, 14, 2, 47, -42, -15, 47, 75, 65, 19, -14, 30, 50],
    },
  ],
  chartOptions: {
    chart: {
      height: 350,
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: '50%',
      },
    },
    dataLabels: {
      enabled: false,
    },
    colors: ['#e05038'],
  },
};

// widgetLineChart
export const widgetLineChart = {
  series: [
    {
      name: 'Desktops',
      data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54],
    },
  ],
  chartOptions: {
    chart: {
      height: 350,
      zoom: {
        enabled: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'straight',
    },

    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
        opacity: 0.5,
      },
    },
    xaxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
      ],
    },
  },
};

export const widgetBarChartThree = {
  series: [
    {
      name: 'Inflation',
      data: [5, 15, 25, 35, 55, 75, 100, 75, 55, 35, 25, 15, 5],
    },
  ],
  chartOptions: {
    chart: {
      type: 'bar',
      width: '70%',
      height: 100,
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: '30%',
        endingShape: 'rounded',
      },
    },
    dataLabels: {
      enabled: false,
    },
    xaxis: {
      crosshairs: {
        width: 1,
      },
    },
    colors: ['#8B5CF6'],
  },
};

export const widgetBarChartFour = {
  series: [
    {
      name: 'Inflation',
      data: [5, 15, 15, 35, 35, 75, 90, 75, 35, 35, 15, 15, 5],
    },
  ],
  chartOptions: {
    chart: {
      type: 'bar',
      width: '70%',
      height: 100,
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: '30%',
        endingShape: 'rounded',
      },
    },
    dataLabels: {
      enabled: false,
    },
    xaxis: {
      crosshairs: {
        width: 1,
      },
    },
    // colors: ['#6534ff'],
    colors: ['#f44336'],
  },
};
export const widgetBarChartFive = {
  series: [
    {
      name: 'Inflation',
      data: [5, 15, 25, 35, 25, 15, 5, 10, 20, 30, 45, 65, 45, 30, 20, 10],
    },
  ],
  chartOptions: {
    chart: {
      type: 'bar',
      width: '70%',
      height: 100,
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: '30%',
        endingShape: 'rounded',
      },
    },
    dataLabels: {
      enabled: false,
    },
    xaxis: {
      crosshairs: {
        width: 1,
      },
    },
    colors: ['#7d6cbb'],
  },
};
export const widgetBarChartSix = {
  series: [
    {
      name: 'Inflation',
      data: [100, 85, 75, 55, 35, 25, 15, 5, 15, 25, 35, 55, 75, 85, 90, 100],
    },
  ],
  chartOptions: {
    chart: {
      type: 'bar',
      width: '70%',
      height: 100,
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: '30%',
        endingShape: 'rounded',
      },
    },
    dataLabels: {
      enabled: false,
    },
    xaxis: {
      crosshairs: {
        width: 1,
      },
    },
    colors: ['#7566b5'],
  },
};

export const radialBar = {
  series: [75],
  chartOptions: {
    chart: {
      toolbar: {
        show: true,
      },
    },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 225,
        hollow: {
          margin: 0,
          size: '70%',
          background: '#fff',
          position: 'front',
          dropShadow: {
            enabled: true,
            top: 3,
            left: 0,
            blur: 4,
            opacity: 0.24,
          },
        },
        track: {
          background: '#fff',
          strokeWidth: '67%',
          margin: 0, // margin is in pixels
          dropShadow: {
            enabled: true,
            top: -3,
            left: 0,
            blur: 4,
            opacity: 0.35,
          },
        },

        dataLabels: {
          name: {
            offsetY: -10,
            show: true,
            color: '#888',
            fontSize: '17px',
          },
          value: {
            formatter: function(val) {
              return parseInt(val);
            },
            color: '#111',
            fontSize: '20px',
            show: true,
          },
        },
      },
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'horizontal',
        shadeIntensity: 0.5,
        gradientToColors: ['#ABE5A1'],
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100],
      },
    },
    stroke: {
      lineCap: 'round',
    },
    labels: ['Choice'],
  },
};
export const radialBarTwo = {
  series: [55],
  chartOptions: {
    chart: {
      toolbar: {
        show: true,
      },
    },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 225,
        hollow: {
          margin: 0,
          size: '70%',
          background: '#fff',
          position: 'front',
          dropShadow: {
            enabled: true,
            top: 3,
            left: 0,
            blur: 4,
            opacity: 0.24,
          },
        },
        track: {
          background: '#fff',
          strokeWidth: '67%',
          margin: 0, // margin is in pixels
          dropShadow: {
            enabled: true,
            top: -3,
            left: 0,
            blur: 4,
            opacity: 0.35,
          },
        },

        dataLabels: {
          name: {
            offsetY: -10,
            show: true,
            color: '#888',
            fontSize: '17px',
          },
          value: {
            formatter: function(val) {
              return parseInt(val);
            },
            color: '#111',
            fontSize: '20px',
            show: true,
          },
        },
      },
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'horizontal',
        shadeIntensity: 0.5,
        gradientToColors: ['#e6af4b'],
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100],
      },
    },
    stroke: {
      lineCap: 'round',
    },
    labels: ['Pending'],
  },
};
export const radialBarThree = {
  series: [12],
  chartOptions: {
    chart: {
      toolbar: {
        show: true,
      },
    },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 225,
        hollow: {
          margin: 0,
          size: '70%',
          background: '#fff',
          position: 'front',
          dropShadow: {
            enabled: true,
            top: 3,
            left: 0,
            blur: 4,
            opacity: 0.24,
          },
        },
        track: {
          background: '#fff',
          strokeWidth: '67%',
          margin: 0, // margin is in pixels
          dropShadow: {
            enabled: true,
            top: -3,
            left: 0,
            blur: 4,
            opacity: 0.35,
          },
        },

        dataLabels: {
          name: {
            offsetY: -10,
            show: true,
            color: '#888',
            fontSize: '17px',
          },
          value: {
            formatter: function(val) {
              return parseInt(val);
            },
            color: '#111',
            fontSize: '20px',
            show: true,
          },
        },
      },
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'horizontal',
        shadeIntensity: 0.5,
        gradientToColors: ['#e05038'],
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100],
      },
    },
    stroke: {
      lineCap: 'round',
    },
    labels: ['Profit'],
  },
};
export const radialBarFour = {
  series: [100],
  chartOptions: {
    chart: {
      toolbar: {
        show: true,
      },
    },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 225,
        hollow: {
          margin: 0,
          size: '70%',
          background: '#fff',
          position: 'front',
          dropShadow: {
            enabled: true,
            top: 3,
            left: 0,
            blur: 4,
            opacity: 0.24,
          },
        },
        track: {
          background: '#fff',
          strokeWidth: '67%',
          margin: 0, // margin is in pixels
          dropShadow: {
            enabled: true,
            top: -3,
            left: 0,
            blur: 4,
            opacity: 0.35,
          },
        },

        dataLabels: {
          name: {
            offsetY: -10,
            show: true,
            color: '#888',
            fontSize: '17px',
          },
          value: {
            formatter: function(val) {
              return parseInt(val);
            },
            color: '#111',
            fontSize: '20px',
            show: true,
          },
        },
      },
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'horizontal',
        shadeIntensity: 0.5,
        gradientToColors: ['#c0dfd9'],
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100],
      },
    },
    stroke: {
      lineCap: 'round',
    },
    labels: ['Revenue'],
  },
};

export const basicArea = {
  series: [
    {
      name: 'series1',
      data: [10, 20, 28, 51, 15, 40, 20],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    // stroke: {
    //   curve: 'smooth'
    // },
    legend: {
      show: false,
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
      labels: {
        show: true,
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    // yaxis:{
    //   show:false
    // },
    // grid:{
    //   show:false
    // },
    // tooltip: {
    //   enabled:false,
    //   x: {
    //     format: 'dd/MM/yy HH:mm'
    //   },
    // },
    colors: ['#e62739'],
    stroke: {
      curve: 'smooth',
      width: 1,
    },
  },
};
export const basicAreaTwo = {
  series: [
    {
      name: 'series1',
      data: [50, 20, 0, 51, 15, 30, 70],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
      labels: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    yaxis: {
      show: false,
    },
    grid: {
      show: false,
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#ffeb3b'],
    stroke: {
      curve: 'smooth',
      width: 1,
    },
  },
};
export const basicAreaThree = {
  series: [
    {
      name: 'series1',
      data: [100, 20, 20, 51, 35, 10, 70],
    },
  ],

  chartOptions: {
    chart: {
      width: '100%',
      height: 100,
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    legend: {
      show: false,
    },

    xaxis: {
      type: 'datetime',
      categories: [
        '2018-09-19T00:00:00',
        '2018-09-19T01:30:00',
        '2018-09-19T02:30:00',
        '2018-09-19T03:30:00',
        '2018-09-19T04:30:00',
        '2018-09-19T05:30:00',
        '2018-09-19T06:30:00',
      ],
      labels: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    yaxis: {
      show: false,
    },
    grid: {
      show: false,
    },
    tooltip: {
      enabled: true,
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    colors: ['#4caf50'],
    stroke: {
      curve: 'smooth',
      width: 1,
    },
  },
};

// start::widgetBasicLine--echart
export const widgetBasicLine = {
  color: ['#4caf50 '],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
    },
  ],
};
export const widgetBasicLineTwo = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
    },
  ],
};
